<!--
 * @Descripttion: 模次
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-10 02:05:52
-->
<template>
  <DileDrawer
    v-model="moldNumForm.visible"
    :loading="moldNumForm.loading"
    size="70%"
    hideFooter
  >
    <template #header>
      <span>{{ $t(`page.moldManageArr.moldArchivesArr.moldNumInfo`) }}</span>
    </template>
    <el-form
      ref="formRef"
      class="el-form-card"
      :model="moldNumForm.formData"
      label-width="6rem"
      size="large"
      status-icon
    >
      <!-- 模具信息 -->
      <el-card>
        <template #header>
          <span>{{ $t("page.moldManageArr.moldArchivesArr.moldInfo") }}</span>
        </template>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.code') + ':'"
          >
            <span>{{ moldNumForm.formData.code }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.name') + ':'"
          >
            <span>{{ moldNumForm.formData.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="
              $t('page.moldManageArr.moldArchivesArr.specification') + ':'
            "
          >
            <span>{{ moldNumForm.formData.specification }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.moldManageArr.moldType') + ':'">
            <span>{{ moldNumForm.formData.extJson.typeName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.factory') + ':'"
          >
            <span>{{ moldNumForm.formData.extJson.factoryName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.position') + ':'"
          >
            <span>{{ moldNumForm.formData.extJson.positionName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.moldManageArr.moldArchivesArr.receivedDate') + ':'"
          >
            <span>{{
              !!moldNumForm.formData.receivedDate
                ? dayjs(moldNumForm.formData.receivedDate).format("YYYY-MM-DD")
                : ""
            }}</span>
          </el-form-item>
        </el-col>
      </el-card>
      <!-- 模次数据 -->
      <el-card>
        <template #header>
          <span>{{
            $t("page.moldManageArr.moldArchivesArr.moldNumData")
          }}</span>
        </template>
        <div class="moldNum-container">
          <div
            v-for="numType in ['limitedNum', 'useMouldNum', 'surplusMouldNum']"
            :key="numType"
          >
            <el-button type="success" size="default">{{
              $t(`page.moldManageArr.moldArchivesArr.${numType}`)
            }}</el-button>
            <el-input
              v-model="moldNumForm.formData[numType]"
              readonly
              size="default"
            >
              <template #append>{{
                $t(`page.moldManageArr.moldArchivesArr.num`)
              }}</template>
            </el-input>
          </div>
        </div>
        <DileTable ref="dileTableRef">
          <template #preColumn>
            <vxe-column
              field="workOrderCode"
              :title="$t('page.equipRepairArr.repairRecordArr.code')"
              width="150"
            />
            <vxe-column
              field="useDate"
              :title="$t('page.moldManageArr.moldArchivesArr.useDate')"
              formatter="formatDate"
            />
            <vxe-column
              field="equipmentCode"
              :title="$t('page.equipManageArr.equipArchivesArr.code')"
              width="150"
            />
            <vxe-column
              field="equipmentName"
              :title="$t('page.equipManageArr.equipArchivesArr.name')"
              width="150"
            />
            <vxe-column
              field="totalNum"
              :title="$t('page.moldManageArr.moldArchivesArr.moldTotalNum')"
            />
            <vxe-column
              field="surplusNum"
              :title="$t('page.moldManageArr.moldArchivesArr.surplusMoldNum')"
            />
            <vxe-column
              field="operator"
              :title="$t('page.moldManageArr.moldArchivesArr.operator')"
            />
            <vxe-column
              field="operatingTime"
              :title="$t('page.moldManageArr.moldArchivesArr.operatingTime')"
              formatter="formatDateTime"
            />
          </template>
        </DileTable>
      </el-card>
    </el-form>
  </DileDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, nextTick, provide } from "vue";
import { useI18n } from "vue-i18n";
import type { propsParam_Inf } from "@/components/dile-table/index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import { dayjs } from "element-plus";
import DileDrawer from "@/components/dile-drawer/index.vue";
import DileTable from "@/components/dile-table/index.vue";
import Dile_APi from "@/api";

let { t } = useI18n();

/**
 * @Author: xzh
 * @Descripttion: 表格实例
 * @Param:
 */
let dileTableRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => ({
  id: 0,
  code: "", //模具编码
  name: "", //模具名称
  specification: "", //规格型号
  typeId: null, //模具类型
  factoryId: null, //使用工厂
  positionId: null, //存放位置
  receivedDate: "", //接收日期
  limitedNum: 0, //模具限定次数
  useMouldNum: 0, //模具使用模次
  surplusMouldNum: 0, //模具剩余模次
  extJson: {
    typeName: "", //模具类型名称
    factoryName: "", //使用工厂名称
    positionName: "", //存放位置名称
  },
});
/**
 * @Author: xzh
 * @Descripttion: 模次表单参数
 * @Param:
 */
let moldNumForm = reactive<object_Inf>({
  visible: false,
  loading: false,
  //表单数据
  formData: defaultData(),
});

/**
 * @Author: xzh
 * @Descripttion:初始化加载
 * @Param:
 * @param {*} id 模具档案主键
 */
let init = async (id: number = 0) => {
  let { visible, loading, formData } = toRefs(moldNumForm);
  visible.value = true;
  await nextTick();
  try {
    loading.value = true;
    //加载表单数据
    await initFormData(id || formData.value.id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单数据
 * @Param:
 */
let initFormData = async (id: number) => {
  let { page, rows } = dileTableRef.value?.getTableParam().pagination || {};
  let { model, mouldNumData }: object_Inf = !!id
    ? await Dile_APi.getMoldNumInfo({
        mouldId: id,
        pagination: {
          pageIndex: page,
          pageSize: rows,
        },
      })
    : { model: defaultData() };
  //加载表单信息
  Object.assign(moldNumForm.formData, model);

  //加载表格信息
  let { record: tableData = [], total } = mouldNumData || {};

  Object.assign(propsParam, {
    tableData,
    tableRecords: total,
  });
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: false,
  tableData: [],
  isPagination: true,
  emitEvents: {
    refreshTable: init,
  },
});
provide("propsParam", propsParam);

defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
.moldNum-container {
  display: flex;
  gap: var(--moldNum-gap);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--moldNum-gap);
  > div {
    display: flex;
    flex: 30% 0 0;
    gap: var(--moldNum-gap);
  }
  --moldNum-gap: 0.5rem;
}
</style>
